<template>
    <div>
      <!--面包屑导航区-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>模拟订单</el-breadcrumb-item>
      </el-breadcrumb>
      <!--卡片视图区域-->
      <el-card >
        <div class="group_btn">
        <el-button type="success" @click="addDialog" size="mini" >添加物品</el-button>
        </div>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" label="序号" width="180" align="center"></el-table-column>
          <el-table-column prop="cateName" label="类名" width="180" align="center"></el-table-column>
          <el-table-column prop="name" label="名称" width="180" align="center"></el-table-column>
          <el-table-column prop="price" label="价格" align="center"></el-table-column>
          <el-table-column label="数量" align="center">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.goodsCount" :min="1" :max="10" label="描述文字"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--申请表单区域-->
        <el-form class="orderForm" :model="orderForm" :rules="orderFormRules" ref="orderFormRef" label-width="100px">
          <el-form-item label="用户选择" prop="userId">
            <el-select v-model="userId" filterable placeholder="请选择">
              <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.username"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发票对应" prop="billTitle">
            <el-select v-model="orderForm.billTitle" filterable placeholder="请选择">
              <el-option
                v-for="item in billList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司名称" prop="billCompany">
            <el-input v-model="orderForm.billCompany"></el-input>
          </el-form-item>
          <el-form-item label="收货地址" prop="address">
            <el-input v-model="orderForm.address"></el-input>
          </el-form-item>
          <el-form-item label="发票描述" prop="billContent">
            <el-input v-model="orderForm.billContent"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addOrder">立即下单</el-button>
          </el-form-item>
        </el-form>
        <!-- 添加弹窗的内容 -->
        <el-dialog title="添加商品"  :visible.sync="addIsDialog" class="addDialog" @close="addDialogClosed">
          <el-form ref="formDataRef" :model="formData">
            <el-form-item label="分类" :label-width="formLabelWidth" prop="selectedCateKeys">
              <el-cascader
                v-model="formData.selectedCateKeys" :props="cateProps"
                :options="cateList"
                @change="handleChange"></el-cascader>
            </el-form-item>
            <el-form-item label="商品" :label-width="formLabelWidth">
              <el-select v-model="selectedGoodsId" clearable placeholder="请选择">
                <el-option
                  v-for="item in goodsList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数量" :label-width="formLabelWidth">
              <el-input v-model="formData.goodsCount" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addIsDialog = false">取 消</el-button>
            <el-button type="primary" @click="addSureBtn">确 定</el-button>
          </div>
        </el-dialog>
      </el-card>
    </div>
</template>

<script>
export default {
  data() {
    return {
      // 添加窗口
      addIsDialog: false,
      // 存放已选择的数据
      multipleSelection: [],
      formLabelWidth: '200',
      formData: {
        cateName: '',
        cateId: '',
        name: '',
        goodsId: '',
        price: '',
        goodsCount: 1,
        selectedCateKeys: []
      },
      tableData: [
      ],
      cateList: [],
      goodsList: [],
      selectedGoodsId: '',
      cateProps: {
        value: 'id',
        label: 'name',
        children: 'children',
        expandTrigger: 'hover',
        checkStrictly: 'false'
      },
      cateId: '',
      orderForm: {
        userId: '',
        billTitle: '',
        billCompany: '部落冲突——巴黎公社',
        billContent: '还请立即增员！',
        address: '我的部落城堡',
        orderDetails: []
      },
      orderFormRules: {
        address: [
          { required: true, message: '请输入收货地址', trigger: 'blur' },
          { min: 3, max: 15, message: '收货地址长度在 3 到 15 个字符', trigger: 'blur' }
        ]
      },
      userList: [],
      userId: '',
      billList: [{ value: '个人', label: '个人' }, { value: '公司', label: '公司' }]
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    // 点击选中后发生的变化
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 删除表格中数据
    handleDelete(index, row) {
      this.tableData.splice(index, 1)
    },
    // 点击添加弹窗的确定按钮
    async addSureBtn() {
      this.addIsDialog = false
      const result = await this.$http.get('/goods/getEasyGoodsById/' + this.selectedGoodsId)
      if (result.data.data.code !== 200) {
        return this.$message.error('获取商品单独信息失败！')
      }
      this.formData.cateName = result.data.data.data.cateName
      this.formData.name = result.data.data.data.name
      this.formData.cateId = this.cateId
      this.formData.goodsId = this.selectedGoodsId
      this.formData.price = result.data.data.data.price
      this.tableData.push(this.formData)
      // 初始化添加表单
      this.formData = {
        cateId: '',
        cateName: '',
        name: '',
        id: '',
        price: '',
        goodsCount: 1,
        selectedCateKeys: []
      }
    },
    // 点击弹出添加窗口
    addDialog() {
      // 获取分类数据
      this.getGoodsCate()
      // 显示窗口
      this.addIsDialog = true
    },
    // 获取所有商品分类数据
    async getGoodsCate() {
      const result = await this.$http.get('/category/getList', { params: { type: 3 } })
      if (result.data.code !== 200) {
        return this.$message.error('获取分类列表失败')
      }
      this.cateList = result.data.data
    },
    // 选择器变化会出发
    async handleChange() {
      if (this.formData.selectedCateKeys.length !== 3) {
        this.formData.selectedCateKeys = []
        return false
      }
      this.cateId = this.formData.selectedCateKeys[2]
      const result = await this.$http.get('/goods/getListByCateId/' + this.cateId)
      if (result.data.code !== 200) {
        return this.$message.error('获取商品列表失败！')
      }
      this.goodsList = result.data.data.data
    },
    // 监听添加对话框的关闭事件
    addDialogClosed() {
      this.$refs.formDataRef.resetFields()
    },
    // 获取用户列表
    async getUserList() {
      const result = await this.$http.get('/user/all')
      if (result.data.code !== 200) {
        return this.$message.error('获取用户列表失败')
      }
      this.userList = result.data.data
    },
    // 提交/创建订单
    async addOrder() {
      this.orderForm.userId = this.userId
      this.orderForm.orderDetails = this.tableData
      if (this.orderForm.orderDetails.length === 0) {
        return this.$message.error('请选择商品后再提交！')
      }
      const result = await this.$http.post('/order/save', this.orderForm)
      if (result.data.code !== 200) {
        this.$message.error('添加订单失败')
      }
      this.$message.success('添加订单成功')
      this.$router.push('/orders')
    }
  },
  computed: {
  }
}
</script>

<style lang="less" scoped>
.orderForm{
  margin-top: 50px;
}
</style>
